<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8" @submit.prevent="areaType()">
          <vue-area-4
              areaId="areaId"
              areaName="areaName"
              :areaIdVal="staff.dto().areaId"
              :areaNameVal="staff.dto().areaName"
              :areaFixed="staff.dto().areaId"
              :selectBy="staff.dto().areaId"
          ></vue-area-4>
          <div class="form-group">
            <label class="font-noraml">时间</label>
            <div class="input-group" style="width:100px;">
              <select name="dateType" class="form-control">
                <option value="0">全部</option>
                <option value="1">本月</option>
                <option value="2">上月</option>
                <option value="3">今年</option>
                <option value="4">去年</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-sm btn-primary">搜索</button>
            <button type="reset" class="btn btn-sm btn-dafault">重置</button>
          </div>
        </form>
        <div class="echarts" id="echarts-pie-chart-a"></div>
      </div>
    </div>
  </div>
</template>
<style>
.echarts {
  height: 540px;
}
</style>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import axios from 'axios'
import {axiosContentType, site} from '@/assets/js/boss'
import echarts from 'echarts'
import vueArea4 from '@/components/vue-area-4'
import Swal from 'sweetalert2'

var pieChartAreaRate;
var pieoptionAreaRate;
export default {
  components: {
    'vue-area-4': vueArea4
  },
  data() {
    return {}
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    this.staff.init(function () {
      that.initChart();
      that.areaType();
    });
  },
  methods: {
    initChart() {
      pieChartAreaRate = echarts.init(document.getElementById('echarts-pie-chart-a'));
      pieoptionAreaRate = {
        title: {
          text: '',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}个 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          top: '100px',
          data: ['无问题', '河岸倾倒垃圾', '生活非法排污', '工业区非法排污', '非法采砂', '河道及禁养区非法养殖', '河湖岸线乱搭乱建', '电鱼毒鱼', '饮用水源地污染', '河面漂浮物及垃圾', '面源污染', '重金属污染', '场镇污水处理厂未建设', '场镇污水处理厂未运行', '场镇污水处理厂处理不达标', '场镇污水管网收集率不高', '电站截留生态流量', '其他问题']
        },
        calculable: true,
        series: {
          name: '',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: []
        }
      };
      pieChartAreaRate.setOption(pieoptionAreaRate);
      $(window).resize(pieChartAreaRate.resize);
    },
    areaType() {
      pieoptionAreaRate.series.data = [];
      // let that = this;
      axios.post(site.analysis.eventType.areaType
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          let dataItems = result.data;
          if (dataItems && dataItems.length > 0) {
            // console.info(pieoptionAreaRate.series.data)
            for (var dataItem of dataItems) {
              pieoptionAreaRate.series.data.push({value: dataItem.value, name: dataItem.name});
            }
          } else {
            pieoptionAreaRate.series.data = [{value: 0, name: '无数据'}];
          }
          pieChartAreaRate.setOption(pieoptionAreaRate);
        } else {
          Swal.fire(result.message);
        }
      });
    }
  }
}
</script>
